/*
  学习目标：setState更新过程
  1. 💥setState更新是异步的，
  2. 💥setState连续调用会产生合并效果：最后一个setState会覆盖前方所有的setState
  设计目的：提高页面性能，减少频繁的操作dom，减少更新次数

*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
    this.setState({ count: count + 2 });
    this.setState({ count: count + 3 });
    // setState是异步更新的，所以先执行了下面打印的 0
    console.log('count -----> ', count); // 0
    // const obj = { name: 'zs' };
    // const obj2 = { name: 'ls' };
    // const newObj = {
    //   ...obj,
    //   ...obj2,
    //   name: 'ww',
    // };
    // 💥会把obj所有的键值对，复制一份
    // 💥name会覆盖掉旧的name
    // console.log('newObj -----> ', newObj);
  };

  render() {
    console.log('render -----> ');
    const { count } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>点我更新count</button>
        <div>我是count - {count}</div>
      </div>
    );
  }
}
